<script lang='ts' setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, nextTick, onMounted } from 'vue'
import jobSchedulerServiceApi from '/@/api/org/bean/job-scheduler'
import OrgJobSchedulerApi from '/@/api/org/bean/job-scheduler'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
import { jumpPath } from '/@/utils/router-kit'
import { OrgJobSchedulerAddUrl, OrgJobSchedulerEditUrl } from '/@/views/org/mapping.json'
const OrgJobSchedulerTableRef = ref()

const OrgJobSchedulerState = reactive({
    queryColumn: [
        { name: 'likeAll', type: 'input', label: '模糊搜索', placeholder: '请输入任务名称/描述' }
    ],
    queryForm: { likeAll: '' },
    /**
     * 表格选中的数据
     */
    selectionData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "crontaskname", label: "任务名称", width: "200", showOverflowTooltip: true, type: 'link',
            linkClick: (row: any) => {
                jumpPath(OrgJobSchedulerEditUrl + row.uuid)
            }
        },
        { prop: "classname", label: "类", showOverflowTooltip: true },
        { prop: "taskplan", label: "任务计划", showOverflowTooltip: true, width: "200" },
        { prop: "active", label: "状态", width: "100", slot: "customStatus" },
        { prop: "startTime", label: "起始时间", width: "200", sort: { sortable: 'custom' } },
        { prop: "endTime", label: "截止时间", width: "200", sort: { sortable: 'custom' } },
        { label: "操作", width: "150", slot: "customAction" },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => OrgJobSchedulerApi.queryPage({ queryName: "defaultQuery" }, { ...params, ...OrgJobSchedulerState.queryForm }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[], pkList: string[]) => {
        OrgJobSchedulerState.selectionData = dataList
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        deletePageTableSelectionDataList(OrgJobSchedulerTableRef, OrgJobSchedulerApi)
    },
    /**
     * 新增按钮点击事件
     */
    onAddButtonClick: () => {
        jumpPath(OrgJobSchedulerAddUrl)
    },
    /**
     * 搜索事件触发
     */
    handleSearch: () => {
        nextTick(() => {
            OrgJobSchedulerTableRef.value.loadTable()
        })
    },
    /** 搜索点击事件 */
    onSearch: () => {
        nextTick(() => {
            OrgJobSchedulerTableRef.value.loadTable()
        })
    },
    /////// 操作 start ///////
    /** 启动按钮点击事件 */
    onStartClick: (row: any) => {
        jobSchedulerServiceApi.changeJobStatus(row.uuid).then(res => {
            ElMessage({ type: 'success', message: '修改成功' })
            OrgJobSchedulerTableRef.value.loadTable()
        })
    },
    /** 执行按钮点击事件 */
    onExecClick: (row: any) => {
        jobSchedulerServiceApi.runOnceJob(row.uuid).then(res => {
            ElMessage({ type: 'success', message: '执行成功' })
        })
    }
    /////// 操作 end ///////
})

onMounted(() => {
    OrgJobSchedulerTableRef.value.loadTable()
})

defineExpose({
    getOrgJobSchedulerTableRef: () => OrgJobSchedulerTableRef.value,
    onDeleteButtonClick: () => OrgJobSchedulerState.deleteTableData(),
    onAddButtonClick: () => OrgJobSchedulerState.onAddButtonClick()
})

</script>
<template>
    <div>
        <div class="container-card">
            <jxtech-page-table
                ref="OrgJobSchedulerTableRef"
                row-key="uuid"
                :table-column="OrgJobSchedulerState.tableColumn"
                :load-data="OrgJobSchedulerState.loadData"
                fit="full"
                @selection-change="OrgJobSchedulerState.tableSelectionChange"
            >
                <template #header>
                    <div class="jxtech-page-table-header-flex">
                        <jxtech-search-form
                            :query-column="OrgJobSchedulerState.queryColumn"
                            :query-form="OrgJobSchedulerState.queryForm"
                            @handle-search="OrgJobSchedulerState.onSearch"
                            :col-span="12"
                        ></jxtech-search-form>
                    </div>
                </template>
                <template #customStatus="{ row }">
                    <el-tag :type="row.active ? 'success' : 'danger'">{{ row.active ? '运行' : '停止' }}</el-tag>
                </template>
                <template #customAction="{ row }">
                    <el-button
                        :type="row.active ? 'danger' : 'success'"
                        size="small"
                        plain
                        @click="OrgJobSchedulerState.onStartClick(row)"
                    >{{ row.active ? '停止' : '启动' }}</el-button>
                    <el-button
                        type="success"
                        size="small"
                        plain
                        @click="OrgJobSchedulerState.onExecClick(row)"
                    >执行</el-button>
                </template>
            </jxtech-page-table>
        </div>
    </div>
</template>

<style scoped>
.container-card {
    background-color: #fff;
}
</style>